<template>
  <div>
    <van-tabs v-model="channelId">
      <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
        <!-- 文章列表 -->
        <article-list :channel-id="channelId" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels } from '@/api'
import ArticleList from './components/article-list.vue'
export default {
  name: 'home-index',
  components: {
    ArticleList
  },
  data () {
    return {
      channelId: 0,
      channelList: []
    }
  },
  methods: {
    // 一个专门调用接口的方法 方法里有可能二次处理请求参数
    async fetchList () {
      const res = await getChannels()
      this.channelList = res.data.channels
    }
  },
  mounted () {
    this.fetchList()
  }
}
</script>

<style>
.van-tabs__line {
  background-color: #007bff !important;
}
</style>
